<template>
  <view>
    <van-dialog id="van-dialog" :show="dialog_show" message="修改成功" />
    <van-popup
      :show="add_show"
      @close="
        () => {
          this.add_show = false;
        }
      "
      position="bottom"
      ><van-cell-group>
        <van-field
          :value="addItem.e_name"
          required
          clearable
          label="项目名"
          placeholder="请输入项目名"
          @change="
            (e) => {
              this.addItem.e_name = e.detail;
              globalLog(addItem);
            }
          "
        />
        <van-field
          :value="addItem.e_desc"
          label="描述"
          placeholder="请输入描述"
          @change="
            (e) => {
              this.addItem.e_desc = e.detail;
            }
          "
        />
        <van-cell
          title="打卡时间"
          :value="
            addItem.e_clk == null
              ? '点击选择打卡时间'
              : addItem.e_clk[0] + ' : ' + addItem.e_clk[1]
          "
          @click="
            () => {
              this.timepick_show = true;
            }
          "
          @cancel="() => {}"
        /><a> </a>
        <a style="text-align: right">
          <van-button
            type="warning"
            @click="
              () => {
                this.addItem = {};
                add_show = false;
              }
            "
            >取消</van-button
          >
          <van-button type="primary" @click="sendAdd">确认</van-button>
        </a>
      </van-cell-group></van-popup
    ><van-popup
      :show="timepick_show"
      @close="
        () => {
          this.timepick_show = false;
        }
      "
    >
      <van-datetime-picker
        type="time"
        @confirm="
          (e) => {
            this.addItem.e_clk = e.detail.split(':');
            this.timepick_show = false;
          }
        "
        @cancel="
          () => {
            this.timepick_show = false;
          }
        "
        @change="
          (e) => {
            globalLog(e.detail);
          }
        "
      />
    </van-popup>
    <view>
      <!--  -->
      <xiri-everyday
        v-for="item in myItems"
        :key="item.e_id"
        :param="item"
        @refreshData="refreshData"
      ></xiri-everyday>
      <van-card>
        <view slot="price">
          <div style="text-align: center">
            <van-button
              icon="add-o"
              type="primary"
              size="large"
              @click="
                () => {
                  add_show = true;
                }
              "
              >创建新的打卡项</van-button
            >
          </div>
          <div style="margin: 20px"></div>
        </view>
        <view slot="footer"> </view>
      </van-card>
      <van-divider />
    </view>
    
  </view>
</template>
<script>
import XiriEverydayRank from "./components/xiri-everyday-rank.vue";
import XiriEveryday from "./components/xiri-everyday.vue";

export default {
  data() {
    return {
      myItems: [],
      addItem: {},
      add_show: false,
      timepick_show: false,
    };
  },
  onLoad: function () {
    this.ljsRequest
      .run("setup")
      .then((res) => {
        this.myItems = res;
        console.log(res);
      })
      .catch((err) => {
        console.error(err);
      });
  },
  methods: {
    refreshData() {
      this.ljsRequest
        .run("setup")
        .then((res) => {
          this.myItems = res;
          this.$forceUpdate();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    sendAdd(e) {
      if (this.addItem.e_clk == null) {
        this.addItem.e_clk = ["08", "00"];
      }
      this.ljsRequest
        .run("add", this.addItem)
        .then((res) => {
          console.log(res);
          this.dialog_show = true;
          this.add_show = false;
        })
        .then(() => {
          this.addItem = {};
          this.refreshData();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    globalLog(e) {
      console.log(e);
    }
  },
  components: { XiriEveryday, XiriEverydayRank },
};
</script>
<style></style>
